<template>
	<el-container class="home-container">
		<el-header>
			<span>我是商家{{ username }}</span>
			<el-button type="infor" @click="layout()">退出</el-button>
		</el-header>

		<el-container>

			<el-aside width="200px">
				<el-menu background-color="#333744" :default-active="this.$route.path" text-color="#fff" active-text-color="#ffd04b"
				 router unique-opened>
					<!-- 最外部菜单 -->
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-user"></i>
							<span>用户管理</span>
						</template>
						<!-- 子菜单 -->
						<el-menu-item index="/seller/mine">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>我的</span>
							</template>
						</el-menu-item>
					</el-submenu>

					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-goods"></i>
							<span>商品管理</span>
						</template>
						<!-- 子菜单 -->
						<el-menu-item index="/seller/goodlist">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>商品列表</span>
							</template>
						</el-menu-item>

						<el-menu-item index="/seller/category">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>商品类别</span>
							</template>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>


			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>

	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				"username": window.sessionStorage.getItem("username")
			}
		},
		methods: {
			async layout() {
				const { data: res } = await this.$http.get("userapi/login/?action=layout", {
					params: {
						"token": window.sessionStorage.getItem("token")
					}
				});
				if(res.status == 1000){
					this.$message.success("退出成功");
					window.sessionStorage.clear();
					this.$router.push("/");
				}
				else {
					this.$message.error("退出失败");
				}
			}

		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-header {
		background-color: #42B983;
		display: flex;
		justify-content: space-between;
		color: white;
		align-items: center;
		font-size: 1.25rem;
	}

	.el-aside {
		background-color: #333744;
	}

	.el-main {
		background-color: gainsboro;
	}

	.home-container {
		height: 100%;
	}

	.el-menu {
		border-right: 0;
	}
</style>
